<template>
	<div class="nav">
		<h1>{{ props.title }}</h1>
		<slot />
		<div class="btn-group">
			<el-button icon="RefreshLeft">刷新</el-button>
			<el-button icon="el-icon-arrow-left">返回</el-button>
		</div>
	</div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
	title: {
		type: String
	}
})
</script>

<style scoped lang="scss">
.nav {
	margin-bottom: 20px;
	h1 {
		padding-left: 20px;
		position: relative;
		height: 24px;
		line-height: 24px;
		font-size: 22px;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 6px;
			height: 24px;
			border-radius: 3px;
			background-color: #f64a1f;
		}
	}
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
